<template>
	<view class="carry-detail">
		<map name=""  id="map" show-location ref="map" :longitude="info.longitude" :latitude="info.latitude" :markers="markers" style="width: 100%;height: 580upx;position: relative;" >
			<cover-view style="position: absolute;" class="self-icon" @click="mapUser" >
				<cover-view>
					<u-icon name="map" size="34"></u-icon>
				</cover-view>
				<cover-view>位置</cover-view>
			</cover-view>
		</map>
		<view class="order-info bg-white">
			<view class="flex row-between order-info-item">
				<view class="">当前状态</view>
				<view class="order-info-detail">{{info.status_desc}}</view>
			</view>
			<view class="flex row-between order-info-item">
				<view class="">所在城市</view>
				<view class="order-info-detail">{{info.province}}{{info.city}}{{info.district}}</view>
			</view>
			<view class="flex row-between order-info-item">
				<view class="">详细地址</view>
				<view class="order-info-detail">{{info.address}}</view>
			</view>
			<view class="flex row-between order-info-item">
				<view class="">收费方式</view>
				<view class="order-info-detail">{{info.type==1?'一口价':'按量计'}}</view>
			</view>
			<view class="flex row-between order-info-item">
				<view class="">支付费用</view>
				<view class="order-info-detail">{{info.total_amount}}元</view>
			</view>
		</view>
		
		<view class="order-info bg-white" v-if="info.remark && info.images.length>0">
			<view class="order-info-tit">
				订单备注
			</view>
			<view class="m-t-20 p-10 order-info-detail" style="background-color: #f1f1f1;border-radius: 5upx;" v-if="info.remark">
				{{info.remark}}
			</view>
			<view  v-if="info.images.length>0" class="flex flex-wrap m-t-20">
				<view class="m-r-15 m-t-10" v-for="item in info.images">
					<image :src="item" mode="" style="width: 150upx;height: 150upx;"></image>
				</view>
			</view>
		</view>
		
		<view class="footer bg-white flex">
			<view class="footer-btn" @click="getOrderFun" v-if="type==30 && info.status==1  ">
				接单
			</view>
			<view class="footer-btn" @click="userCancelFun" v-if="type==10 && info.status==1">
				取消
			</view>
			<view class="footer-btn" @click="startCarryFun(3)" v-if="type==20 && info.status==2">
				开始搬运
			</view>
			<!-- 搬运工取消 -->
			<view class="cancel-btn" @click="carryCancelFun" v-if="type==20 && info.status==2">
				取消
			</view>
			<view class="footer-btn" v-if="type==10 && info.status==3"  @click="startCarryFun(4)">
				搬运完成
			</view>
		</view>
	</view>
</template>

<script>
	import {carryDetail,getOrder,userCancel,carryCancel,upStatus} from '@/api/carry'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				// 10是用户 20是搬运工
				type:10,
				id:null,
				info:{
					longitude:'',
					latitude:'',
					images:[]
				},
				markers:[],
				userLocation:{
					longitude:'',
					latitude:''
				},
				map:null
			}
		},
		methods: {
			startCarryFun(status){
				upStatus({
					id:this.id,
					status
				}).then(res=>{
					if(res.code==1){
						this.$toast({
							title:"更新成功"
						})
						uni.$emit('updateList');
						this.carryDetailFun(this.id);
					}
				})
			},
			carryCancelFun(){
				carryCancel({id:this.id}).then(res=>{
					if(res.code==1){
						this.$toast({
							title:"取消成功"
						})
						uni.$emit('updateList');
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},1500)
					}
					
				})
			},
			userCancelFun(){
				userCancel({id:this.id}).then(res=>{
					if(res.code==1){
						this.$toast({
							title:"取消成功"
						})
						uni.$emit('updateList');
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},1500)
					}
					
				})
			},
			getOrderFun(){
				getOrder({id:this.id}).then(res=>{
					if(res.code==1){
						this.$toast({
							title:"接单成功"
						})
						// this.carryDetailFun(this.id);
						uni.redirectTo({
							url:'bundle/pages/carry_list/carry_list'
						})
					}
				})
			},
			mapUser(){
				console.log(this.map);
				this.map.moveToLocation();
			},
			carryDetailFun(id){
				carryDetail({id}).then(res=>{
					console.log(res);
					this.info = res.data.info;
					this.markers.push({
						id:1,
						longitude:this.info.longitude,
						latitude:this.info.latitude
					})
				})
			},
			getUserLocation(){
				return new Promise((resolve,reject)=>{
					uni.getLocation({
						success:res=>{
							resolve(res)
						},
						fail:err=>{
							reject(err)
						}
					})
				})
			}
		},
		async onLoad({id,type}){
			console.log(id)
			this.id = id;
			this.type = type;
			this.carryDetailFun(id)
			this.map = uni.createMapContext("map", this);
			this.userLocation  = await this.getUserLocation();
			// = res
		},
		computed:{
			...mapGetters(["userInfo", "inviteCode", 'appConfig']),
		}
	}
</script>

<style lang="scss">
	.carry-detail{
		padding-bottom: calc(180upx + env(safe-area-inset-bottom));
		.order-info{
			margin: 20upx 20upx 0 20upx;
			padding: 20upx;
			border-radius: 8upx;
			.order-info-tit{
				font-size: 30upx;
				color: #333;
			}
			.order-info-item{
				padding: 10upx 0;
				.order-info-detail{
					color: #A5A5A5;
				}
			}
		}
	}
	.self-icon{
		min-width: 80upx;
		min-height: 80upx;
		background-color: #fff;
		bottom: 10%;
		display: flex;
		justify-content: center;
		right: 10%;
		flex-direction: column;
		font-size: 24upx;
		text-align: center;
	}
	.footer{
		z-index: 10;
		position: fixed;
		bottom:env(safe-area-inset-bottom) ;
		left: 0;
		width: 100%;
		padding: 20upx;
		box-shadow: 0upx -5upx 5upx 5upx #eee;
		.footer-btn{
			height: 88upx;
			line-height: 88upx;
			background-color: #CE6D51;
			color: #fff;
			text-align: center;
			flex: 1;
		}
		.cancel-btn{
			flex: 1;
			height: 88upx;
			line-height: 88upx;
			background-color: #f1f1f1;
			color: #333;
			text-align: center;
			margin-right: 10upx;
		}
	}
</style>
